<template>
  <div :class="['container', { dark: theme == 'dark' }]">
    <div class="poolBox">
      <div class="pool">
        <div class="poolText">{{ $t('fundPool.text1') }}</div>
        <div class="poolNum">{{ insurancePoolData.safety }}</div>
      </div>

      <div class="pool">
        <div class="poolText">{{ $t('fundPool.text2') }}</div>
        <div class="poolNum">{{ insurancePoolData.supernode }}</div>
      </div>

      <div class="pool">
        <div class="poolText">{{ $t('fundPool.text3') }}</div>
        <div class="poolNum">{{ insurancePoolData.node }}</div>
      </div>
    </div>

    <!-- <div class="poolTitle">我的超级节点</div>

    <div class="apply">
      <div @click="apply">申请</div>
    </div> -->

    <div class="poolTitle">{{ $t('fundPool.text4') }}</div>

    <div class="refundAmount">{{ $t('fundPool.text5') }}{{ recordsInfo.totalPrice }}</div>

    <div class="tabs">
      <div
        class="tabsItem"
        :class="{ tabsItemActive: tabsIndex == 0 }"
        @click="tabsItemClick(0)"
      >
        审核中
      </div>
      <div
        class="tabsItem"
        :class="{ tabsItemActive: tabsIndex == 1 }"
        @click="tabsItemClick(1)"
      >
        {{ $t('fundPool.text6') }}
      </div>
      <div
        class="tabsItem"
        :class="{ tabsItemActive: tabsIndex == 2 }"
        @click="tabsItemClick(2)"
      >
        {{ $t('fundPool.text7') }}
      </div>
      <div
        class="tabsItem"
        :class="{ tabsItemActive: tabsIndex == 3 }"
        @click="tabsItemClick(3)"
      >
        {{ $t('fundPool.text8') }}
      </div>
    </div>

    <div class="listHeader">
      <div>{{ $t('fundPool.text9') }}</div>
      <div>{{ $t('fundPool.text10') }}</div>
      <div>{{ $t('fundPool.text11') }}</div>
      <div>{{ $t('fundPool.text12') }}</div>
    </div>

    <div
      class="list"
      :style="{
        background: theme == 'dark' ? '#282a40' : '#f7f7fb'
      }"
      v-if="recordsList.length > 0"
    >
      <div
        class="listItem"
        v-for="(item, index) in recordsList"
        :key="index"
      >
        <div>{{ index + 1 }}</div>
        <!-- 审核中 -->
        <div v-if="tabsIndex == 0">{{ Number(item.flowPrice).toFixed(3) }}</div>
        <div v-if="tabsIndex == 0">0</div>
        <!-- 进行中 -->
        <div v-if="tabsIndex == 1">{{ Number(item.flowPrice).toFixed(3) }}</div>
        <div v-if="tabsIndex == 1">{{ Number(item.num * item.dayMoney).toFixed(3) }}</div>
        <!-- 已结束 -->
        <div v-if="tabsIndex == 2">{{ Number(item.flowPrice).toFixed(3) }}</div>
        <div v-if="tabsIndex == 2">{{ Number(item.flowPrice).toFixed(3) }}</div>
        <!-- 返额历史 -->
        <div v-if="tabsIndex == 3">{{ Number(item.flowPrice * item.day).toFixed(3) }}</div>
        <div v-if="tabsIndex == 3">{{ Number(item.flowPrice).toFixed(3) }}</div>

        <div>{{ item.createTime }}</div>
      </div>
    </div>
    <u-empty
      v-else
      :text="$t('home.nomore')"
    ></u-empty>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { insurancePool, cashflowList } from '../../common/apiString.js';
export default {
  data() {
    return {
      tabsIndex: 0,
      recordsInfo: {
        records: {}
      },
      recordsList: [],
      insurancePoolData: {
        safety: 0,
        supernode: 0,
        node: 0
      },
      pagesObj: {
        pages: 1,
        size: 999999999
      },
      initListState: true
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onShow() {
    this.init();
    this.initList();
  },
  onReachBottom() {
    if (this.recordsList.length != this.recordsInfo.records.total) this.initList();
  },
  methods: {
    tabsItemClick(i) {
      if (this.initListState) {
        this.recordsList = [];
        this.pagesObj.pages = 1;
        this.tabsIndex = i;
        this.initList();
      }
    },
    init() {
      this.$utils.initDataToken({ url: insurancePool, data: {}, type: 'get' }, (res, msg) => {
        this.insurancePoolData = res;
      });
    },
    initList() {
      this.initListState = false;
      this.$utils.initDataToken(
        {
          url: cashflowList,
          data: {
            pages: this.pagesObj.pages,
            size: this.pagesObj.size,
            status: this.tabsIndex
          },
          type: 'get'
        },
        (res, msg) => {
          if (this.recordsList.length != res.records.total) {
            this.pagesObj.pages += 1;
            this.recordsList.push(...res.records.records);
          }
          this.recordsInfo = res;
          this.initListState = true;
        }
      );
    },

    apply() {
      uni.showModal({
        title: '提示',
        content: '申请超级节点',
        confirmText: this.$t('bico.W19'),
        cancelText: this.$t('mining.text8'),
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 40rpx 30rpx;
  overflow: scroll;
}
.poolBox {
  background: url('/static/pool.png') no-repeat;
  background-size: 100% 100%;
}
.u-empty {
  height: 250rpx;
}
.pool {
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
}
.pool .poolText {
  color: #000;
}
.pool .poolNum {
  margin-top: 40rpx;
  font-size: 44rpx;
  font-weight: bold;
  color: #000;
}

.poolTitle {
  font-weight: bold;
  font-size: 36rpx;
  margin-top: 40rpx;
}

.apply {
  display: flex;
  justify-content: center;
  align-items: center;
}
.apply div {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #4fcf6b;
  border-radius: 48rpx;
  height: 70rpx;
  padding: 0 70rpx;
  color: #fff;
  margin-top: 40rpx;
}
.refundAmount {
  margin-top: 20rpx;
  font-size: 24rpx;
}

.tabs {
  margin-top: 40rpx;
  display: flex;
  border: 1px solid #a1e5b0;
  height: 70rpx;
}
.tabsItem {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tabsItemActive {
  color: #fff;
  background: #4fcf6b;
}
.listHeader {
  display: flex;
  margin-top: 40rpx;
}
.listHeader div {
  flex: 1;
  text-align: center;
}

.list {
  margin-top: 30rpx;
}
.listItem {
  display: flex;
  height: 80rpx;
}
.border1 {
  border-bottom: 2rpx solid #444444;
}
.border2 {
  border-bottom: 2rpx solid #282a40;
}
.listItem div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
